<script setup lang="ts"></script>

<template>
  <div class="article-page">
    <nav class="my-nav">
      <h3>问医生</h3>
      <p @click="$router.push('/user/consult')">我的问诊</p>
    </nav>
    <div class="con">
      <van-col><cp-icon name="home-doctor"></cp-icon> 不知道问什么科室？</van-col>
      <div class="search">
        <input type="text" placeholder="输入疾病、症状、医生名" />
        <button class="shou">搜索</button>
      </div>
    </div>
    <van-row class="sangou">
      <van-col class="sangou-ic"><van-icon name="passed" />三甲医生实名认证</van-col>
      <van-col class="sangou-ic"><van-icon name="passed" />平台双重质控审核</van-col>
      <van-col class="sangou-ic"><van-icon name="passed" />医生7x24h响应</van-col>
    </van-row>
    <router-link to="/article/doctor">
      <div class="yhimg">
        <img src="@/assets/yh.jpg" alt="" />
      </div>
    </router-link>
    <!-- 常见科室 -->
    <van-col><h4>常见科室</h4></van-col>
    <div class="art-navs">
      <van-row class="art-row">
        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-order"></cp-icon>
            <p class="title">皮肤科</p>
          </router-link>
        </van-col>

        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-docs"></cp-icon>
            <p class="title">儿科</p>
          </router-link>
        </van-col>

        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-rp"></cp-icon>
            <p class="title">妇科</p>
          </router-link>
        </van-col>

        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-find"></cp-icon>
            <p class="title">产科</p>
          </router-link>
        </van-col>
      </van-row>

      <van-row class="art-row">
        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-order"></cp-icon>
            <p class="title">消化内科</p>
          </router-link>
        </van-col>

        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-docs"></cp-icon>
            <p class="title">泌尿外科</p>
          </router-link>
        </van-col>

        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-rp"></cp-icon>
            <p class="title">普通内科</p>
          </router-link>
        </van-col>

        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-find"></cp-icon>
            <p class="title">呼吸内科</p>
          </router-link>
        </van-col>
      </van-row>

      <van-row class="art-row">
        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-order"></cp-icon>
            <p class="title">口腔科</p>
          </router-link>
        </van-col>

        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-docs"></cp-icon>
            <p class="title">眼科</p>
          </router-link>
        </van-col>

        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-rp"></cp-icon>
            <p class="title">骨科</p>
          </router-link>
        </van-col>

        <van-col span="6">
          <router-link to="/article/doctor" class="min">
            <cp-icon name="home-find"></cp-icon>
            <p class="title">耳鼻咽喉科</p>
          </router-link>
        </van-col>
      </van-row>
    </div>
    <!-- 内科 -->
    <div class="art-content">
      <h4>内科</h4>
      <van-row class="art-row">
        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">感染科 传染科</h5>
            <p>新冠、艾滋、狂犬病、不明原因发热</p>
          </router-link>
        </van-col>

        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">神经内科</h5>
            <p>失眠、头晕、头痛、中风、癫痫</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row class="art-row">
        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">内分泌科</h5>
            <p>痛风、糖尿病、肥胖、甲亢甲减、骨质疏松</p>
          </router-link>
        </van-col>

        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">肾脏内科</h5>
            <p>肾炎、血尿、蛋白尿、尿路感染</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row class="art-row">
        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">心血管内科</h5>
            <p>高血压、高血脂、心衰、冠心病、心率失常</p>
          </router-link>
        </van-col>

        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">血液科</h5>
            <p>贫血、白血病、淋巴癌、骨髓瘤、血小板减少</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row class="art-row">
        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">风湿免疫科</h5>
            <p>痛风、强直性脊柱炎、红斑狼疮、类风湿</p>
          </router-link>
        </van-col>
      </van-row>
    </div>

    <!-- 外科 -->
    <div class="art-content">
      <h4>外科</h4>
      <van-row class="art-row">
        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">普外科</h5>
            <p>痔疮、肠胃癌、筋脉曲张、肛门疾病</p>
          </router-link>
        </van-col>

        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">心胸外科</h5>
            <p>气胸、肺结节、肺癌、食管癌</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row class="art-row">
        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">甲状腺乳腺外科</h5>
            <p>乳腺甲状腺结节、癌、乳腺炎</p>
          </router-link>
        </van-col>

        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">肝胆胰腺外科</h5>
            <p>胆囊炎、胆结石、肝癌、胆息肉、胰腺炎</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row class="art-row">
        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">神经外科</h5>
            <p>脑外伤、脑梗死、脑出血、脑肿瘤</p>
          </router-link>
        </van-col>

        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">美容整形科</h5>
            <p>疤、烫伤、医美、植发、腋臭等</p>
          </router-link>
        </van-col>
      </van-row>
    </div>

    <!-- 其他 -->
    <div class="art-content">
      <h4>其他</h4>
      <van-row class="art-row">
        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">精神心理科</h5>
            <p>抑郁、焦虑、失眠、精神分裂</p>
          </router-link>
        </van-col>

        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">性病科</h5>
            <p>尖锐湿疣、包皮龟头炎、艾滋病、梅毒</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row class="art-row">
        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">肿瘤科</h5>
            <p>肿瘤手术、化疗、放疗、靶向药</p>
          </router-link>
        </van-col>

        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">影响检验科</h5>
            <p>化验检查、影像学、病理报告解读</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row class="art-row">
        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">药剂科</h5>
            <p>儿童孕妇哺乳期用药、药物过敏</p>
          </router-link>
        </van-col>

        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">疼痛科 麻醉科</h5>
            <p>止痛、手术麻醉、无痛分娩、无痛人流</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row class="art-row">
        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">疫苗科</h5>
            <p>狂犬病、破伤风、HPV、疫苗</p>
          </router-link>
        </van-col>

        <van-col span="11">
          <router-link to="/article/doctor" class="min">
            <h5 class="title">全科</h5>
            <p>发热、咳嗽、腹泻、感冒、复诊配药</p>
          </router-link>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.article-page {
  margin: 14px;
  margin-bottom: 80px;
  .my-nav {
    height: 44px;
    width: 100%;
    z-index: 999;

    display: flex;
    align-items: center;
    h3 {
      font-size: 18px;
    }
    p {
      display: flex;
      flex: 1;
      justify-content: flex-end;
      font-size: 16px;
      line-height: 44px;
    }
  }
  .con {
    height: 98px;
    width: 100%;
    background: #f8f9f9;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-radius: 10px;
    padding: 0 14px;
    .cp-icon {
      width: 36px;
      height: 36px;
      vertical-align: middle;
      border-radius: 100%;
    }

    .search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 36px;
      width: 100%;
      background-color: #fff;
      border-radius: 50px;
      border: 2px solid #666;
      padding-left: 12px;
      padding-right: 3px;
      input {
        width: 70%;
        height: 100%;
        border-radius: 50px;
        border: 0;
        font-size: 14px;
      }
      .shou {
        width: 52px;
        height: 28px;
        border-radius: 38px;
        line-height: 26px;
        font-size: 14px;
        border: 1px solid #8a77f5;
        background-color: #8a77f5;
        color: #fff;
      }
    }
  }
  .sangou {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    .sangou-ic {
      font-size: 11px;
      color: #cd7f32;
    }
  }
  .yhimg {
    width: 100%;
    height: 80px;
    margin-bottom: 20px;

    border-radius: 7px;
    margin-top: 12px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .art-navs {
    margin-top: 26px;
    .art-row {
      margin-bottom: 20px;
      .min {
        display: flex;
        flex-direction: column;
        align-items: center;
        .cp-icon {
          font-size: 32px;
          text-align: center;
        }
        .title {
          font-weight: 500;
          margin-top: 5px;
          color: var(--cp-text1);
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }
  .art-content {
    margin-top: 30px;
    .art-row {
      display: flex;
      justify-content: space-between;
      margin-top: 14px;
      .min {
        display: block;
        height: 88px;
        border-radius: 7px;
        background-color: #f8f9f9;
        padding-top: 14px;
        .title {
          font-weight: 500;
          font-size: 13px;
          margin-bottom: 10px;
          border-left: 3px solid #8a77f5;
          padding-left: 14px;
        }
        p {
          color: #ccc;
          font-size: 10px;
          padding: 0 14px;
        }
      }
    }
  }
}
</style>
